<template>
  <div class="map-page">
    <van-sticky>
      <van-nav-bar class="page-nav-bar" title="地图找房" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <baidu-map :center="center" class="bm-view" :zoom="15" @ready="initMap">
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
  <!-- 缩放控件 -->
  <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT" :showZoomInfo="show"></bm-navigation>
      <bm-overlay 
      pane="labelPane" 
      class="sample" 
      @draw="draw($event,item.coord)"
      v-for="(item,index) in maplist" :key="index"
      >
        <span>
            {{item.label}} {{item.count}}套
        </span>
      </bm-overlay>
    </baidu-map>
  </div>
</template>

<script>
import {mapActions,mapState} from 'vuex'
export default {
  props: {},
  data() {
    return {
        center: "",
       show:true,
    }
  },
  computed: {
    ...mapState('city',['maplist','currentCity'])
    
  },
  created() {},
  mounted() {
    this.getMapList(this.$store.state.city.mapValue)
    // console.log(this.maplist);
  },
  watch: {},
  methods: {
    ...mapActions('city',['getMapList']),
    onClickLeft() {
      this.$router.push('/layout/home')
    },
     initMap ({ BMap, map }) {
       this.center=this.currentCity
      const myGeo = new BMap.Geocoder()
      myGeo.getPoint(this.currentCity, function (point) {
        if (point) {
          console.log(point)
          map.centerAndZoom(point, 11)
        }
      }, this.currentCity)
    },
    draw ({el, BMap, map},{longitude,latitude}) {
      const pixel = map.pointToOverlayPixel(new BMap.Point(longitude,latitude))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    }
  },
  components: {},
}
</script>

<style scoped lang="less">
.page-nav-bar {
  background-color: #21b97a;
  //  font-size: 18px;
  //  height:45px
}
.bm-view {
  width: 375px;
  height: 700px;
  .sample {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  line-height: 60px;
  background: #21b97a;
  overflow: hidden;
  box-shadow: 0 0 5px #000;
  border: #fff 2px solid ;
   color: #fff;
   font-size: 12px;
  text-align: center;
  padding: 10px;
  position: absolute;
}
}
</style>
